<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="/lib/react/react.js"></script>
    <script src="/lib/react/react-dom.js"></script>
    <script src="/lib/babel/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">

var CommentHeader = React.createClass({
  render: function(){
    return (
      <header>
        <h1>{this.props.title}</h1>  
      </header>
      );
  }
});


var CommentBody = React.createClass({
  render: function(){
    return (
      <article>
        <ul>
          {
            this.props.comments.map(function(child){
              return <li key={child.id}>{child.value}</li>;
            })
          }
        </ul>        
      </article>
    );
  }
});

var CommentForm = React.createClass({
  render: function(){
    return (
      <article>
        <form>
          <p><input ref="words" type="text" name="" value="" /></p>
          <p><button type="">Submit</button></p>
        </form>        
      </article>
    );
  }
});

var CommentFooter = React.createClass({
  render: function(){
    return (
      <footer>
        <h4>{this.props.copyleft}</h4>
      </footer>
    );
  }
});

var CommentBox = React.createClass({
  save: function(){
    console.log(this);
    // this.setState({words: 'event.target.value'});
  },

  getInitialState: function (e){
    
    return {
      words: "blabla"  
    };
  },

  componentDidUpdate: function( p,  s){
    console.log("update");
    console.log(p);
    console.log(s);
  },

  render: function() {
    return (
      <section className="commentBox">
        <CommentHeader title={this.props.title} />
        <CommentBody comments={this.props.comments}/>
        <CommentForm />
        <CommentFooter copyleft={this.props.copyleft} />

        <button type="button" onClick={this.save}>save</button>
      </section>
    );
  }
});

var comments = [
  {id:"adfasdfasdf", value:"adsfasdfffffffffff"},
  {id:"xxx", value:"dfdf"},
  {id:"string_decoder.StringDecoder(encoding);", value:"dfdf"},
  {id:"xxx3333", value:"xxx3333"},
  {id:"aaaaaaaa", value:"getElementsByTagName('')"}
];

ReactDOM.render(
  <CommentBox comments={comments} title="Write your comments!" copyleft="My Comment" />,
  document.getElementById('content')
);


    </script>
  </body>
</html>
